import React, { Component } from 'react';
import BaseHeader from '@/components/base/baseHeader';
import Topdingbu from '@/components/base/Topdingbu';
import GlobalBottom from '@/components/base/GlobalBottom';
import Tjshiren from './child/Tjshiren';
import Zxshoulu from './child/Zxshoulu';
import Zxsl from './child/Zxsl';
import { Link } from 'react-router-dom'
import './tuijian.scss';
class Com extends Component {
    constructor (props) {
      super(props)
      this.state = {
        tclist: [
          '「春天」','「夏天」','「秋天」','「冬天」','「写风」','「写花」','「写雪」','「写雨」','「月亮」','「梅花」','「荷花」','「菊花」','「柳树」','「爱国」','「思乡」','「爱情」','「励志」','「哲理」','「悼亡」','「老师」','「友情」','「饮酒」','「西湖」','「春节」','「元宵节」','「清明节」','「端午节」','「七夕节」','「中秋节」','「重阳节」','「赞美诗」','「伤怀诗」','「山水诗」','「田园诗」','「送别诗」','「离别诗」'
        ],
        sjlist: [
          {
            imga: 'https://www.xzslx.net/css/tangshisanbaishou.gif',
            xxx:'唐诗三百首',
            zznr:'《唐诗三百首》作为中小学生接触中国古代诗歌最好的入门书籍,只要熟读唐诗三百首,不会作诗也会吟。《唐诗三百首》共收录了77家诗...'
          },
          {
            imga: 'https://www.xzslx.net/css/songcisanbaishou.gif',
            xxx:'宋词三百首',
            zznr:'宋词是宋代最有特色的文学样式,《宋词三百首》为词学大师朱孝臧（又号彊村）选编，是流传最广的、影响最大的宋词选本。初版于民国甲子...'
          },
          {
            imga: 'https://www.xzslx.net/css/gushisanbaishou.gif',
            xxx:'古诗三百首',
            zznr:'《唐诗三百首》作为中小学生接触中国古代诗歌最好的入门书籍,只要熟读唐诗三百首,不会作诗也会吟。《唐诗三百首》共收录了77家诗...'
          },
          {
            imga: 'https://www.xzslx.net/css/gushishijiushou.gif',
            xxx:'古诗十九首',
            zznr:'《唐诗三百首》作为中小学生接触中国古代诗歌最好的入门书籍,只要熟读唐诗三百首,不会作诗也会吟。《唐诗三百首》共收录了77家诗...'
          },
          {
            imga: 'https://www.xzslx.net/css/songcijingxuan.gif',
            xxx:'宋词精选',
            zznr:'《唐诗三百首》作为中小学生接触中国古代诗歌最好的入门书籍,只要熟读唐诗三百首,不会作诗也会吟。《唐诗三百首》共收录了77家诗...'
          },
          {
            imga: 'https://www.xzslx.net/css/xiaoxuegushi.gif',
            xxx:'小学古诗',
            zznr:'《唐诗三百首》作为中小学生接触中国古代诗歌最好的入门书籍,只要熟读唐诗三百首,不会作诗也会吟。《唐诗三百首》共收录了77家诗...'
          },
          {
            imga: 'https://www.xzslx.net/css/chuzhonggushi.gif',
            xxx:'初中古诗',
            zznr:'《唐诗三百首》作为中小学生接触中国古代诗歌最好的入门书籍,只要熟读唐诗三百首,不会作诗也会吟。《唐诗三百首》共收录了77家诗...'
          },
          {
            imga: 'https://www.xzslx.net/css/gaozhonggushi.gif',
            xxx:'高中古诗',
            zznr:'《唐诗三百首》作为中小学生接触中国古代诗歌最好的入门书籍,只要熟读唐诗三百首,不会作诗也会吟。《唐诗三百首》共收录了77家诗...'
          }
        ]
      }
    }
  
    render () {
      return (
        <div className = "container">
          <BaseHeader />
          <Topdingbu />
          <div className = "siftJingx">
            <div className = "jingxk">
              <div className = "jingxtop"></div>
              <div className = "jingxContent">
                <h2>精选题材</h2>
                <ul>
                  {
                    this.state.tclist.map((item, index) =>{
                      return(
                        <li key={ index }><a>{ item }</a></li>
                      )
                    })
                  }
                </ul>
              </div>
              <div className = "jingxbot"></div>
            </div>
          </div>
          <div className = "collJingx">
            <h2>精选诗集</h2>
            <ul>
              {
                this.state.sjlist.map((item, index)=>{
                  return(
                    <li key={index}>
                      <p><img src={item.imga} alt=""/></p>
                      <div className="sjname">
                        {item.xxx}
                      </div>
                      <div className = "sjzhez">
                        <p>{item.zznr}</p>
                        <div>
                         <Link to="./../shiwen">点击阅读</Link>
                        </div>
                      </div>
                    </li>
                  )
                })
              } 
            </ul>
          </div>
          <Tjshiren />
          <Zxshoulu />
          <Zxsl />
          <GlobalBottom />
        </div>
      )
    }
  }
  
  export default Com;